<template>
  <div class="mainhome" >

    <div class="banner">
      <img src="../assets/images/banner.jpg" />
      <router-link to="/Login"><img src="../assets/images/login.png" /></router-link>
    </div>

    <div class="indnav">
      <flexbox >
        <flexbox-item><router-link to="/Check"><img src="../assets/images/indb1.png" /><p>货物查询</p></router-link></flexbox-item>
        <flexbox-item><router-link to="/Check_inspection"><img src="../assets/images/indb2.png" /><p>查验查询</p></router-link></flexbox-item>
        <flexbox-item><router-link to="/Check_manifest"><img src="../assets/images/indb3.png" /><p>舱单查询</p></router-link></flexbox-item>
        <flexbox-item><router-link to="/Question"><img src="../assets/images/indb4.png" /><p>常见问题</p></router-link></flexbox-item>
      </flexbox>
      </div>

      <div class="innews" >
        <div class="innews_nav"><a @click="selectStyle(true)" :class=" {'tongzhi on':activetz,'tongzhi':!activetz}">通知公告</a><span>|</span><a @click="selectStyle(false)" :class=" {'hotwt':activetz,'hotwt on':!activetz}">热门问题</a></div>
        <router-link to="/News" class="inmore" v-if="activetz">更多+</router-link>
        <router-link to="/Question" class="inmore" v-if="!activetz">更多+</router-link>
        <ul v-if="activetz">
          <li v-for = "(item,index) in newslist" v-bind:key="index"><a @click="gohref(item)"><span>[{{item.ndate | dataFormat('MM-dd')}}]</span><p>{{item.ntitle}}</p></a></li>
        </ul>
       
      </div>


    <div class="indfoot"><p>版权所有  佛山市电子口岸有限公司</p><router-link to="javascript:void(0);" onclick="openQRcode()"><img src="../assets/images/fewm.png" alt="" width="100%" /></router-link></div>
    <div id="mylayer-mode" style="display:none">
      <div class="mylayer"><img src="../assets/images/ewm.jpg" style="max-width:100%;max-height:100%" /><p align="center">公众号ID: 佛山国际贸易单一窗口</p></div>
    </div>

  </div>
</template>

<script>

  export default {

  name: 'Home' ,
    data() {
    return {
    newslist: {},
    newslist2: {},
    activetz:true
    }},
    methods: {
　　　　selectStyle (b) {
        this.activetz=b;
    },gohref(item){
      if(item.ntype==1){
        this.$router.push({path:'/News_detail',query:{id:item.nid}});
      }
       if(item.ntype==2 || item.ntype==3){
        const nurl=item.nurl;
        if(nurl.substr(0, 1) == "/") {
          window.location.href = this.GLOBAL.apiurl+item.nurl;
        }else{
         window.location.href = item.nurl;
        }
       }
    }
  },
  created () {
    this.$http.get(this.GLOBAL.notice).then(({data}) => {
      if(data.res_code==1){
       this.newslist=data.data.list;
      }
    })

    this.$http.get(this.GLOBAL.question).then(({data}) => {
      if(data.res_code==1){
       this.newslist2=data.data.list;
      }
    })
  }
}



</script>


<style scoped>
  .indfoot,.indnav{background: #ffffff;}
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }

</style>
